<template>
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <div class="app-breadcrumb">
      江苏传智播客教育科技股份有限公司
      <span class="breadBtn">体验版</span>
    </div>

    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <!-- <img src="@/assets/common/1.jpg" class="user-avatar"> -->
          <!-- <img :src="this.$store.state.user.userInfo.staffPhoto" class="user-avatar"> -->
          <!-- <img :src="this.$store.getters.staffPhoto" class="user-avatar"> -->
          <img :src="staffPhoto" class="user-avatar">
          <!-- <span class="user-name">{{ this.$store.state.user.userInfo.username }}</span> -->
          <!-- <span class="user-name">{{ this.$store.getters.username }}</span> -->
          <span class="user-name">{{ username }}</span>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <el-dropdown-item>
              首页
            </el-dropdown-item>
          </router-link>
          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
            <el-dropdown-item>项目地址</el-dropdown-item>
          </a>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">登出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Hamburger from '@/components/Hamburger'

export default {
  components: {
    Hamburger
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'username', // 就相当于给当前的this 绑定了一个 this.username
      'staffPhoto' // this.staffPhoto
    ])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    logout() {
      // 在工作里面 删除 一般有两种， 一种是调用服务器的退出接口， 还一种是前端自己删除情况token等一些数据
      // 需要情况 token， 顺带着清除一些vuex里面的数据
      // this.$store.commit('token的清除')
      // this.$store.commit('userInfo的清除')
      // this.$store.dispatch('action')  还可以吧多个mutaion 合并到一个action里面我们的业务前端代码
      // 只需要调用一次action，就可以完成上面两部操作
      this.$store.dispatch('user/logout')
      // 凡是涉及到 url地址栏参数的拼接的时候， 需要对参数序列化 encodeURIComponent
      // encodeURIComponent 就是让我们的 浏览器在读取url地址的时候，不把一些参数丢弃，正常的展示的一个方法
      // this.$router.push(`/login?abc=${encodeURIComponent(this.$route.fullPath)}`)
      // encodeURIComponent 专门来解析url地址栏参数的，放在一些query参数丢失
      this.$router.push(`/login?return=${encodeURIComponent(this.$route.fullPath)}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  // background: #4a7bfb;
  background-image: -webkit-linear-gradient(left, #3d6df8, #5b8cff);
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  .app-breadcrumb {
      display: inline-block;
      font-size: 18px;
      line-height: 50px;
      margin-left: 10px;
      color: #ffffff;
      cursor: text;
      .breadBtn {
        background: #84a9fe;
        font-size: 14px;
        padding: 0 10px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border-radius: 10px;
        margin-left: 15px;
      }
    }

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        // margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          vertical-align: middle;
        }
        .user-name {
          margin: 0 8px;
          vertical-align: middle;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 20px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
